<template>
	<view>
		<view class="map">
			<map :scale='18' id="myMap" style="width: 100%;" :style="{height: mapHeight + 'px'}" :markers="markers"
				:longitude="longitude" :latitude="latitude"></map>
		</view>
		<view class="center">
			<view class="top">
				<view class="user">
					<u-avatar size="50"></u-avatar>
					<view class="name">
						{{userInfo.name}}
						<view class="eid">
							{{userInfo.employee_id}}
						</view>
					</view>

				</view>
				<button class="total" @click="gototal">
					打卡记录
				</button>
			</view>
			<view class="bottom">
				<view class="card" v-if="old" @click="check">
					<view class="ka">
						{{text}}
					</view>
					<view class="time">
						{{ clock | FormatTime }}
					</view>
				</view>
				<view class="newcard" v-if="news" @click="check">
					<view class="ka">
						{{text}}
					</view>
					<view class="time">
						{{ clock | FormatTime }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid'
	import {
		getDate
	} from "../../commit/format.js"
	import axios from "axios"
	import {
		mapState
	} from 'vuex';
	import {
		postclockinfo
	} from "@/api/api.js"

	export default {
		data() {
			return {
				clock: Date.parse(new Date()),
				// 经纬度
				latitude: 39.9,
				longitude: 116.4,
				// 签到
				text: '签到',
				old: true,
				news: false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			const _this = this;
			uni.getSystemInfo({
				success: (res) => {
					_this.mapHeight = res.screenHeight - res.statusBarHeight
					_this.mapHeight = _this.mapHeight
				}
			})

		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.clock = Date.parse(new Date());
			}, 1000);
		},
		// 过滤时间
		filters: {
			FormatTime: function(val) {
				return getDate(val, "hour");
			},
		},
		methods: {
			// 点击事件跳转去统计页面
			gototal() {
				wx.navigateTo({
					url: '/pages/clock/total'
				})
			},

			// 获取地理位置
			getLocationInfo() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res, "当前位置");
						that.latitude = res.latitude
						that.longitude = res.longitude
					}
				});
			},

			// 点击签到 并提交
			check() {
				if (this.userInfo.name == '未知用户') {
					uni.showModal({
						title: '请先登录',
						showCancel: false
					});
				} else {
					console.log('签到')
					this.text = '已签到'
					if (this.text = '已签到') {
						this.old = false,
							this.news = true
					}
					this.Handleclockinfo()
				}
			},

			// 传值
			Handleclockinfo() {
				const id = uuidv4()
				postclockinfo({
					id: id,
					employee_id: this.userInfo.employee_id,
					employee_name: this.userInfo.name,
					checktime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
				})
				// let res = postclockinfo()
				// console.log(res);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 30%;
		// background-color: antiquewhite;
	}

	.center {
		width: 100%;
		height: 70%;
		// background-color: aqua;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			height: 200rpx;
			background-color: #fff;
			border-radius: 40rpx;
			position: absolute;
			top: 300rpx;
			display: flex;
			justify-content: space-between;

			.user {
				display: flex;
				padding-left: 80rpx;
				padding-top: 50rpx;

				.name {
					font-size: 50rpx;
					margin-left: 20rpx;

					.eid {
						font-size: 30rpx;
					}
				}
			}

			.total {
				width: 200rpx;
				height: 100rpx;
				font-size: 35rpx;
				font-weight: bold;
				text-align: center;
				line-height: 100rpx;
				margin-right: 20rpx;
				margin-top: 52rpx;
			}
		}

		.bottom {
			width: 100%;
			height: 585upx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 30%;
			display: flex;
			align-items: center;
			justify-content: center;

			.card {
				width: 44%;
				height: 55%;
				background-color: #007edc;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.ka {
					font-size: 40rpx;
				}
			}

			.newcard {
				width: 44%;
				height: 55%;
				background-color: grey;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.ka {
					font-size: 40rpx;
				}
			}
		}
	}
</style>